<script setup lang="ts">
import { ref, defineProps, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { get } from "@/libs/request";
import { dateFormat } from "@/libs/util";
const props = defineProps(["close", "params"]);
const ruleForm = ref({
  orderId: props.params.orderId,
  orderCode: undefined,
  orderPrice: undefined,
  orderStatus: undefined,
  paymentAmount: undefined,
  addressName: undefined,
  addressMobile: undefined,
  orderAddress: undefined,
  clientRemark: undefined,
  systemRemark: undefined,
  createTime: undefined,
  orderGoodsSnapshot: [],
});
/**
 * 获取订单详情
 */
const getDetail = async () => {
  const res = await get(`order/detail/${props.params.orderId}`);
  if (res.errCode == 0) {
    ruleForm.value = res.data;
  } else {
    ElMessage.error(res.errMsg);
  }
};

onMounted(() => {
  getDetail();
});
</script>
<template>
  <div class="page">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item @click="props.close()">订单列表</el-breadcrumb-item>
      <el-breadcrumb-item>订单详情</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="main">
      <el-descriptions title="订单详情" direction="vertical" :column="4" :size="size" border>
        <el-descriptions-item label="订单号">
          {{ ruleForm.orderCode }}
        </el-descriptions-item>
        <el-descriptions-item label="订单金额">
          <span v-if="ruleForm.orderPrice != ruleForm.orderPrice" class="oldPrice">【{{ ruleForm.orderPrice }}元】</span>
          <span>{{ ruleForm.orderPrice }}元</span>
        </el-descriptions-item>
        <el-descriptions-item label="订单状态">
          {{ ruleForm.orderStatus }}
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">
          {{ dateFormat(ruleForm.createTime) }}
        </el-descriptions-item>
        <el-descriptions-item label="收货地址" :span="4">
          {{ ruleForm.addressName }} {{ ruleForm.addressMobile }} {{ ruleForm.orderAddress ?? "未填写" }}
        </el-descriptions-item>
        <template v-if="['待收货','已完成'].includes(ruleForm.orderStatus)">
          <el-descriptions-item label="快递类型" :span="1"> 
            {{  ruleForm.expressType }}
          </el-descriptions-item>
          <el-descriptions-item label="快递单号" :span="1"> 
            {{  ruleForm.expressCode }} 
          </el-descriptions-item>
          <el-descriptions-item label="发货时间" :span="1"> 
            {{  dateFormat(ruleForm.expressTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="收货时间" :span="1"> 
            {{  ruleForm.deliveryTime?dateFormat(ruleForm.deliveryTime):"--" }}
          </el-descriptions-item>
        </template>
        <el-descriptions-item label="客户备注" :span="4">
          {{ ruleForm.clientRemark ?? "未填写" }}
        </el-descriptions-item>
        <el-descriptions-item label="系统备注" :span="4">
          {{ ruleForm.systemRemark ?? "未填写" }}
        </el-descriptions-item>
        <el-descriptions-item label="订单商品" :span="4">
          <el-table :data="ruleForm.orderGoodsSnapshot" style="width: 100%">
            <el-table-column prop="keyName" label="规格" />
            <el-table-column label="封面">
              <template #default="scope">
                <el-image :src="scope.row.cover" />
              </template>
            </el-table-column>
            <el-table-column prop="oldPrice" label="折前价" />
            <el-table-column prop="price" label="价格" />
            <el-table-column prop="skuCode" label="sku码" />
            <el-table-column prop="barCode" label="条形码" />
            <el-table-column prop="quantity" label="数量" width="80" />
          </el-table>
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>
<style>
.oldPrice {
  text-decoration: line-through;
}
</style>
